<template>
  <div style="width: auto; height: 100%">
    <div id="container" style="width: 100%; height: 100%; position: relative" />
    <button @click="startDrawing" style="position: absolute; top: 100px; left: 20px">绘制电子围栏</button>
    <button @click="saveBtn" style="position: absolute; top: 100px; left: 150px">保存电子围栏</button>
    <!-- 出车 -->
    <!-- <div class="vehicle">
      <div class="car">监测到车辆出车，自动检查该车派车单和作业计划...</div>
      <div class="check">
        <div class="iconCheck" />
        <div>检查通过</div>
      </div>
    </div> -->
    <!-- 到达电子围栏区域 -->
    <!-- <div class="alarm-check">
      <div class="car">监测到车辆停留3分钟，查询K码自动生成工作范围，开始自动检查...</div>
      <div class="check">
        <div class="iconCheck" />
        <div>检查通过</div>
      </div>
    </div> -->
    <!-- 进入警戒区 -->
    <!-- <div class="alarm-checks">
      <div class="car">进入警戒区，停留超过5分钟，开始自动检查...</div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { getTokenApi, getCoordinateApi, getVehicleLast, getAreaSave, getAreaPage } from "@/api/coordinate"
import { transformGPSToGaode } from "@/utils/coordinateTransform" // 引入转换函数
import iconPull from "../../../assets/images/icon-park.png" // 停车位图标
import coordtransform from "coordtransform" // 确保已安装 coordtransform
let map, marker, polyline, passedPolyline, circle
const lineArr = ref([])
// 用来跟踪车辆是否在电子围栏内的状态
const coordinates = ref<any[]>([]) // 用于存储坐标数据
// 假设 username 和 password 是从用户输入获取的
const username = ref("admin") // 示例值
const password = ref("admin") // 示例值
const gaodeCoordinates = ref([]) // 用于存储转换后的高德坐标
const allCoordinates = ref([]) // 用于存储所有获取到的高德坐标
const mouseTool = ref(null) // 用于绘制电子围栏的 MouseTool
const electronicData = ref()
const radiusData = ref()
const coordinateData = ref() //电子围栏坐标数据
const isDrawing = ref(false) // 控制绘制状态的标志位

// 初始化地图
const initMap = () => {
  map = new AMap.Map("container", {
    resizeEnable: true,
    center: [104.072328, 30.51041],
    zoom: 13
  })
  // 初始化 MouseTool 插件
  map.plugin(["AMap.MouseTool"], () => {
    mouseTool.value = new AMap.MouseTool(map)
    if (!mouseTool.value) {
      console.error("MouseTool 初始化失败")
    }
  })
  // 创建Marker
  marker = new AMap.Marker({
    map: map,
    position: [104.08023956707125, 30.50807842007313],
    icon: "https://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
    angle: -90,
    zIndex: 1000 // 圆形的叠加顺序
  })

  // 创建轨迹线
  polyline = new AMap.Polyline({
    map: map,
    path: lineArr.value,
    showDir: true,
    strokeColor: "#28F",
    strokeWeight: 6
  })

  // 创建已经经过的路径线
  passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: "#AF5",
    strokeWeight: 6
  })
  map.setZoom(18) // 再次设置 zoom
  map.setCenter([104.08052994824632, 30.50837877403112])
  //绘制停车区
  createFenceFroms()
}
// 根据 coordinateData 创建电子围栏
const createFenceFromCoordinates = () => {
  if (coordinateData.value) {
    const { longitude, latitude, radius } = coordinateData.value
    const circle = new AMap.Circle({
      center: new AMap.LngLat(longitude, latitude), // 圆心
      radius: radius, // 半径
      strokeColor: "#2F96E1", // 轮廓线颜色
      strokeOpacity: 1, // 轮廓线透明度
      strokeWeight: 6, // 轮廓线宽度
      fillOpacity: 0.4, // 圆形填充透明度
      fillColor: "#1C9FFF", // 圆形填充颜色
      strokeStyle: "dashed",
      zIndex: 50 // 圆形的叠加顺序
    })

    // 将圆形添加到地图
    circle.setMap(map)
  }
}

//绘制停车区
const createFenceFroms = () => {
  const circle = new AMap.Circle({
    center: new AMap.LngLat(104.08023956707125, 30.50807842007313), // 圆心
    radius: 50, // 半径
    strokeColor: "#FB951A", // 轮廓线颜色
    strokeOpacity: 1, // 轮廓线透明度
    strokeWeight: 6, // 轮廓线宽度
    fillOpacity: 0.2, // 圆形填充透明度
    fillColor: "#FFC200", // 圆形填充颜色
    strokeStyle: "dashed",
    zIndex: -2 // 圆形的叠加顺序
  })

  // 将圆形添加到地图
  circle.setMap(map)
  // 添加自定义图标
  const centerMarker = new AMap.Marker({
    position: circle.getCenter(), // 使用围栏的圆心坐标
    map: map,
    icon: new AMap.Icon({
      image: iconPull, // 自定义图标路径
      size: new AMap.Size(32, 60), // 图标大小
      imageSize: new AMap.Size(32, 60) // 图片的实际大小
    }),
    offset: new AMap.Pixel(-20, -30) // 图标相对位置的偏移量
  })
}

// 绘制电子围栏
const startDrawing = () => {
  if (!mouseTool.value) {
    console.error("MouseTool 尚未初始化")
    return
  }

  isDrawing.value = true // 开始绘制时设置标志位为 true

  // 开始绘制圆形
  mouseTool.value.circle({
    strokeColor: "#2F96E1", // 轮廓线颜色
    strokeOpacity: 1, // 轮廓线透明度
    strokeWeight: 6, // 轮廓线宽度
    fillOpacity: 0.4, // 圆形填充透明度
    fillColor: "#1C9FFF", // 圆形填充颜色
    strokeStyle: "dashed"
  })

  // 监听绘制完成事件
  const onDrawComplete = (event) => {
    const circle = event.obj // 获取绘制的圆
    if (!circle) {
      console.error("绘制失败，未能获取到 circle 对象")
      return
    }

    const { lng, lat } = circle.getCenter() // 获取圆心坐标（GCJ-02）
    radiusData.value = circle.getRadius() // 获取圆的半径

    // 将 GCJ-02 坐标转换为 WGS-84
    const [wgsLng, wgsLat] = coordtransform.gcj02towgs84(lng, lat)
    electronicData.value = { longitude: wgsLng, latitude: wgsLat } // 保存 WGS-84 坐标

    console.log("电子围栏圆心坐标 (WGS-84):", electronicData.value)
    console.log("电子围栏半径:", radiusData.value)
    fetchVehicleSave()

    // 停止绘制并移除事件监听器
    mouseTool.value.close() // 停止 MouseTool
    mouseTool.value.off("draw", onDrawComplete) // 移除事件监听器
    isDrawing.value = false // 绘制完成后设置标志位为 false
  }

  // 绑定事件监听器
  mouseTool.value.on("draw", onDrawComplete)
}

// 登录函数
const login = async () => {
  try {
    const response = await getTokenApi(username.value, password.value)
    await fetchCoordinates()
    await fetchVehicleLast()
    // await setTimeout(() => {
    //   fetchVehicleSave()
    // }, 1000)
  } catch (error) {
    console.error("登录失败:", error)
  }
}

// 获取坐标
const fetchCoordinates = async () => {
  try {
    const response = await getCoordinateApi(1, 10) // 示例请求
    coordinates.value = response.data // 假设返回的数据在 response.data 中
  } catch (error) {
    console.error("获取坐标失败:", error)
  }
}
// 获取最新轨迹点
const hasAlertedNoPlan = ref(false)
const hasAlertedChecked = ref(false)
const fetchVehicleLast = async () => {
  try {
    const response = await getVehicleLast() // 获取最新轨迹点
    console.log(response.data.vehicleInfo.fixMode, "++++")
    if (!response || !response.data || !response.data.vehicleInfo) {
      console.error("获取的车辆信息无效", response)
      return // 处理无效数据
    }

    // 获取最新坐标并进行转换
    const lat = parseFloat(response.data.vehicleInfo.latitude) // 将字符串转为浮点数
    const lon = parseFloat(response.data.vehicleInfo.longitude)
    if (isNaN(lat) || isNaN(lon)) {
      console.error("无效的坐标", lat, lon)
      return // 处理无效坐标
    }
    const [mgLon, mgLat] = transformGPSToGaode(lat, lon) // 转换坐标
    gaodeCoordinates.value = { longitude: mgLon, latitude: mgLat } // 保存转换后的坐标
    // 更新 marker 的位置
    marker.setPosition([mgLon, mgLat]) // 设置 marker 的新位置
    // marker.setPosition([104.08023956707125, 30.50807842007313]) // 设置 marker 的新位置

    // map.setCenter([mgLon, mgLat])
    // map.setCenter([mgLon, mgLat]) // 设置中心为新位置
    // 保存坐标到 allCoordinates 并更新 polyline
    allCoordinates.value.push([mgLon, mgLat]) // 添加到坐标数组
    polyline.setPath(allCoordinates.value) // 更新 polyline 的路径
    console.log(allCoordinates, "坐标数组")
    // console.log(response.data.messageList, "电子围栏告警")
    // 处理无计划车辆
    if (allCoordinates.value.length >= 3) {
      const prevCoord = allCoordinates.value[1] // 上一个位置
      const currCoord = allCoordinates.value[2] // 当前最新位置
      // 比较经纬度
      if (prevCoord[0] == currCoord[0] || prevCoord[1] == currCoord[1]) {
        if (!hasAlertedNoPlan.value && !hasAlertedChecked.value) {
          const schedulePlanList = response.data.schedulePlanList
          if (!schedulePlanList || schedulePlanList.length === 0) {
            alert("疑似无计划作业")
            hasAlertedNoPlan.value = true
          } else {
            hasAlertedChecked.value = true
            alert("疑似无计划作业")
          }
        }
      }
    }
    // 处理电子围栏告警
    const messageList = response.data.messageList
    if (messageList && messageList.length > 0) {
      messageList.forEach((message) => {
        const { type, msg } = message
        // 检查告警类型并显示对应的消息
        if (["1", "2", "3", "4"].includes(type)) {
          alert(msg)
        }
      })
    }

    // if(response.data)
  } catch (error) {
    console.error("获取最新轨迹点失败:", error)
  }
}

//获取电子围栏坐标和半径
const fetchVehicleSave = async () => {
  const data = {
    type: "1", // 根据你的需要设置类型
    latitude: electronicData.value.latitude, // 将纬度转换为字符串
    longitude: electronicData.value.longitude, // 将经度转换为字符串
    radius: radiusData.value // 半径
  }
  try {
    const response = await getAreaSave(data) // 获取最新轨迹点
    console.log(electronicData.value.latitude, electronicData.value.longitude, radiusData.value, "+++++++++++++")
    // fetchVehicleArea()
  } catch (error) {
    console.error("上传失败:", error)
  }
}

//获取电子围栏数据
const fetchVehicleArea = async () => {
  const pageSize = ref(200)
  let latestFence = null
  try {
    for (let p = 1; p <= 1; p++) {
      const response = await getAreaPage(p.toString(), pageSize.value)
      if (response && response.data && response.data.records && response.data.records.length > 0) {
        const fenceList = response.data.records
        // 获取最新的一条记录（假设数组中的最后一条是最新的）
        latestFence = fenceList[0]
      }
      // 获取最新坐标并进行转换
      const lat = parseFloat(latestFence.latitude) // 将字符串转为浮点数
      const lon = parseFloat(latestFence.longitude)
      if (isNaN(lat) || isNaN(lon)) {
        console.error("无效的坐标", lat, lon)
        return // 处理无效坐标
      }

      const [mgLon, mgLat] = transformGPSToGaode(lat, lon) // 转换坐标
      coordinateData.value = { longitude: mgLon, latitude: mgLat, radius: latestFence.radius } // 保存转换后的坐标
      console.log(coordinateData.value, "最新的电子围栏数据2")
    }
  } catch (error) {
    console.error("上传失败:", error)
  }
}
const saveBtn = () => {
  fetchVehicleArea()
    .then(() => {
      // 在成功获取电子围栏后刷新浏览器
      window.location.reload()
    })
    .catch((error) => {
      console.error("获取电子围栏失败:", error)
    })
}
// 挂载时初始化地图
onMounted(() => {
  initMap()
  login()
  setInterval(() => {
    // 定期获取最新轨迹点
    fetchVehicleLast()
  }, 5000)
  fetchVehicleArea().then(() => {
    if (!isDrawing.value) {
      createFenceFromCoordinates()
    }
  })
})
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 500px;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 6rem;
}

.input-card .btn:last-child {
  margin-right: 0;
  margin-top: 6px;
}

.car {
  width: 306px;
  height: 61px;
  background-image: url("../../../assets/images/bgc-red.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 10px;
  font-weight: normal;
  font-size: 18px;
  color: #ff4a4a;
  text-align: center;
  line-height: 21px;
}

.vehicle {
  position: absolute;
  top: 200px;
  left: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alarm-check {
  position: absolute;
  top: 200px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alarm-checks {
  position: absolute;
  top: 300px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.check {
  width: 128px;
  height: 42px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  line-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    Alibaba PuHuiTi 2,
    Alibaba PuHuiTi 20;
  font-weight: normal;
  font-size: 18px;
  color: #000000;
  margin-top: -5px;

  .iconCheck {
    width: 30px;
    height: 30px;
    background-image: url("../../../assets/images/icon-check.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>
